<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="${contextPath}/static/statistics/css/mui.min.css">
		<link rel="stylesheet" href="${contextPath}/static/statistics/css/app.css" />
		<link rel="stylesheet" href="${contextPath}/static/statistics/css/mui.picker.min.css" />
		<link rel="stylesheet" href="${contextPath}/static/statistics/css/mui.dtpicker.css" />
		
		<style type="text/css">
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			h5.mui-content-padded {
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 15px !important;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">专卖异常</h1>
		</header>
		<div class="mui-content">
			<h5 class="mui-content-padded">异常选择 </h5>
			<div class="mui-content-padded">
				<button id='showUserPicker' class="btn mui-btn mui-btn-block" type='button'>--请选择异常--</button>
			</div>

			<h5 class="mui-content-padded">日期选择</h5>
			<div class="mui-content-padded">
				<button id='showDatePicker' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block">--请选择时间--</button>
			</div>
			<div class="mui-content-padded mui-text-center">
				<button id="getExceptionInfo" type="button" class="mui-btn mui-btn-primary" style="width: 120px; margin-top: 20px;">
					查询
				</button>
			</div>
			<div class="title">
				<h5 class="mui-content-padded">异常详细：</h5>
			</div>
			<ul class="mui-table-view" id="ulExcepList">

			</ul>
		</div>

		<script src="${contextPath}/static/statistics/js/mui.min.js" ></script>
		<script src="${contextPath}/static/statistics/js/mui.picker.min.js"></script>
		<script src="${contextPath}/static/statistics/js/jquery.js"></script>
		<script src="${contextPath}/static/statistics/js/xx.js"></script>
		<script>
			function getWeather(data) {
		        console.log(data);
		    }
		</script>
		<script>
			var user="${userid}";
			(function($, doc, $$) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '假私非烟品'
					}, {
						value: 'aaa',
						text: '营销异动'
					}, {
						value: 'lj',
						text: '消费者投诉'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							showUserPickerButton.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);

					var dtPicker = new $.DtPicker({
						"type": "date",
						beginDate: new Date(2016, 12, 01),
						endDate: new Date() //设置结束日期 
					});
					/*dtPicker.show(function (selectItems) { 
				        console.log(selectItems.y);//{text: "2016",value: 2016} 
				        console.log(selectItems.m);//{text: "05",value: "05"} 
				   	}) */
					var showDatePickerButton = doc.getElementById('showDatePicker');
					showDatePickerButton.addEventListener('tap', function(event) {
						dtPicker.show(function(items) {
							showDatePickerButton.innerText = items;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);

				});

				var getExceptionInfo = doc.getElementById('getExceptionInfo');
				getExceptionInfo.addEventListener('tap', function(event) {
					/* 这里需要些controller */
					
					mui.ajax("${contextPath}/Honest/showAllException", {
						data:{
							exp : doc.getElementById('showUserPicker').innerText,
							datetime : doc.getElementById('showDatePicker').innerHTML,
							userid:user
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 5000, //超时时间设置为5秒；
						success: function(data) {
							if(data.data.length==0){
								 mui.toast('没有当前异常数据',{ duration:1000, type:'div' }) 								
							}
							$$("#ulExcepList").children().remove();
							$.each(data.data, function(i, item) {
								var pItem = "";
								pItem += "<li class='mui-table-view-cell mui-media'>";
								//pItem += "<img class='mui-media-object mui-pull-left' src='http://placehold.it/40x30'>";
								pItem += "<div class='mui-media-body'>";
								if(item.EXCEPTYPE == 1) {
									pItem += "<button id='dealExcep' type='button' class='mui-btn mui-btn-success mui-btn-outlined mui-navigate-right' disabled='disabled' style='float: right;width:78px' name='" + item.SHOPID + "'>解决完成</button>"
								} else {
									pItem += "<button id='dealExcep' type='button' class='mui-btn mui-btn-danger ' style='float: right;width:78px' name='" + item.SHOPID + "' onclick='test(this.name)'>解除异常</button>"
								}
								pItem += "<p class='mui-ellipsis'>" + item.SHOPNAME + "</p>";
								pItem += "<p class='mui-ellipsis'>" + item.SHOPADD + "</p>";
								pItem += "</div>";
								pItem += "</li>";
								$$("#ulExcepList").append(pItem);
							})
						},
						error: function(xhr, type, errorThrown) {
							
						}
					});
				}, false);
				var ulExcepList = doc.getElementById('ulExcepList');
				var button = ulExcepList.getElementsByTagName('button')[0];
				ulExcepList.addEventListener('tap', function(event) {

				});

			})(mui, document, jQuery);
			
			function test(value){
				var webview = mui.openWindow({
					/* 这里需要些controller */
					url: "${contextPath}/Honest/queryException?shopid="+value,
					createNew: false,
					show: {
						autoShow: false, //页面loaded事件发生后自动显示，默认为true
						aniShow: "slide-in-right" //页面显示动画，默认为”slide-in-right“；
						
					},
					waiting: {
						autoShow: true, //自动显示等待框，默认为true
						title: '正在加载...' //等待对话框上显示的提示内容
						
					}
				});
				clearHtml();
			}
			
			function clearHtml(){
				var ul=document.getElementById("ulExcepList");
				ul.innerHTML="";
			}
		</script>
		<script>
		</script>
	</body>

</html>